<template>
  <section class="center-main base-main pa">
    <!--头部-->
    <div class="header pr" :class="isVipBgc ? 'bgc2' : 'bgc1'">
      <div class="fs16">
        <img class="inline-block" :src="user.avatar" alt="头像" />
        <p class="right pr inline-block">
          <span class="nick-name block fs16">{{user.nickname}} <img :src="grade_img" alt=""></span>
          <span class="progress pr block">
            <span class="pa" style="width:30%"></span>
          </span>
          <span class="member block pr">终生会员：{{member_time}}/{{member_total}} <i class="iconfont iconwenhao fs12"></i></span>
        </p>
      </div>
      <div class="vip-rule text-c" @click="toJumpPage('vipRule')">
        <img class="fliker-img pa" src="../../assets/img/img_flicker.png" alt="">
        <p class="fs12">
          <i class="iconfont iconhuangguan fs12"></i> VIP权益 <i class="iconfont icongengduox fs12"></i>
        </p>
        <p class="vip-day" v-if="rank == 0">
          立即开通
        </p>
        <p class="vip-day" v-if="rank == 1">
          还有{{member_time}}天到期
        </p>
        <p class="vip-day" v-if="rank == 2">
          永久会员
        </p>
      </div>
    </div>
    <!--头部-->

    <!--内容-->
    <div class="content-box">

      <!--部分信息展示-->
      <div class="show-information bgcFFF">
        <div class="pr text-c" @click="toJumpPage('myBalance')">
          <p class="fs18 color45454D line-top">
            <span class="fs10">￥</span>{{balance}}
          </p>
          <p class="fs12 color7A7B82">
            我的余额
          </p>
          <i></i>
        </div>
        <div class="pr text-c" @click="toJumpPage('integralSubsidiary')">
          <p class="fs18 color45454D line-bottom-">
            {{integral}}<span class="fs10">分</span>
          </p>
          <p class="fs12 color7A7B82">
            我的积分
          </p>
          <i></i>
        </div>
        <div class="text-c" @click="toJumpPage('myFans')">
          <p class="fs18 color45454D">
            {{fans}}<span class="fs10">个</span>
          </p>
          <p class="fs12 color7A7B82">
            我的粉丝
          </p>
        </div>
      </div>
      <!--部分信息展示-->

      <!--我的订单-->
      <div class="my-order bgcFFF mt10">
        <p class="fs15 color45454D" @click="handleToOrderList">我的订单 <span class="fs12 flr color7A7B82">查看全部 <i class="iconfont icongengduox"></i></span></p>
        <div class="order-type">
          <ul class="text-c">
            <li @click="handleToOrderList(1)">
              <i class="pr iconfont icondaifukuanx">
                <sup
                  v-if="no_pay > 0"
                  class="pa"
                  :class="no_pay > 9 ? (no_pay > 99 ? 'sup-type-2' : 'sup-type-1') : ''"
                >{{no_pay | hundreds}}</sup>
              </i>
              <span>待付款</span>
            </li>
            <li @click="handleToOrderList(2)">
              <i class="pr iconfont icondaifahuox">
                <sup
                v-if="no_devivery > 0"
                class="pa"
                :class="no_devivery > 9 ? (no_devivery > 99 ? 'sup-type-2' : 'sup-type-1') : ''"
                >{{no_devivery | hundreds}}</sup>
              </i>
              <span>待发货</span>
            </li>
            <li @click="handleToOrderList(3)">
              <i class="pr iconfont icondaishouhuox1">
                <sup
                  v-if="wait_receive > 0"
                  class="pa"
                  :class="wait_receive > 9 ? (wait_receive > 99 ? 'sup-type-2' : 'sup-type-1') : ''"
                >{{wait_receive | hundreds}}</sup>
              </i>
              <span>待收货</span>
            </li>
            <li @click="handleToOrderList(4)">
              <i class="pr iconfont icondaipingjiax">
                <sup
                  v-if="estimate > 0"
                  class="pa"
                  :class="estimate > 9 ? (estimate > 99 ? 'sup-type-2' : 'sup-type-1') : ''"
                >{{estimate | hundreds}}</sup>
              </i>
              <span>评论返积分</span>
            </li>
            <li @click="toJumpPage('afterSaleList')">
              <i class="pr iconfont icontuikuanx">
                <sup
                  v-if="refund > 0"
                  class="pa"
                  :class="refund > 9 ? (refund > 99 ? 'sup-type-2' : 'sup-type-1') : ''"
                >{{refund | hundreds}}</sup>
              </i>
              <span>售后服务</span>
            </li>
          </ul>
        </div>
      </div>
      <!--我的订单-->

      <!--单元格-->

      <!--<div class="cell-box mt10">-->
      <!--<div class="cell-1 bgcFFF">-->
      <!--<ul>-->
      <!--<li class=" color7A7B82" @click="toJumpPage('couponList')">-->
      <!--<i class="icon-left iconfont iconyouhuiquanx"></i>-->
      <!--<span class="msg inline-block line-bottom fs15 color45454D">-->
      <!--我的优惠券-->
      <!--<span class="flr fs12 color7A7B82">-->
      <!--{{coupon_count}}张-->
      <!--<i class="iconfont icongengduox pr"></i>-->
      <!--</span>-->
      <!--</span>-->
      <!--</li>-->
      <!--<li @click="toJumpPage('enshrineList')">-->
      <!--<i class="icon-left iconfont iconwodeshoucangx"></i>-->
      <!--<span class="msg inline-block line-bottom fs15 color45454D">-->
      <!--我的收藏-->
      <!--<span class="flr fs12 color7A7B82">-->
      <!--<i class="iconfont icongengduox pr"></i>-->
      <!--</span>-->
      <!--</span>-->
      <!--</li>-->
      <!--<li @click="toJumpPage('addressList')">-->
      <!--<i class="icon-left iconfont iconwodeshouhuodizhix"></i>-->
      <!--<span class="msg inline-block line-bottom fs15 color45454D">-->
      <!--我的收货地址-->
      <!--<span class="flr fs12 color7A7B82">-->
      <!--<i class="iconfont icongengduox pr"></i>-->
      <!--</span>-->
      <!--</span>-->
      <!--</li>-->
      <!--<li @click="toJumpPage('integralSubsidiary')">-->
      <!--<i class="icon-left iconfont iconwodejifenx"></i>-->
      <!--<span class="msg inline-block fs15 color45454D">-->
      <!--我的积分-->
      <!--<span class="flr fs12 color7A7B82">-->
      <!--{{integral}}-->
      <!--<i class="iconfont icongengduox pr"></i>-->
      <!--</span>-->
      <!--</span>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</div>-->

      <!--<div class="cell-2 bgcFFF mt10">-->
      <!--<ul>-->
      <!--<li>-->
      <!--<i class="icon-left iconfont iconwentifankuix"></i>-->
      <!--<span class="msg inline-block line-bottom fs15 color45454D">-->
      <!--问题反馈-->
      <!--<span class="flr fs12 color7A7B82">-->
      <!--<i class="iconfont icongengduox pr"></i>-->
      <!--</span>-->
      <!--</span>-->
      <!--</li>-->
      <!--<li>-->
      <!--<i class="icon-left iconfont iconguanyuSOFOx"></i>-->
      <!--<span class="msg inline-block fs15 color45454D">-->
      <!--关于SOFO-->
      <!--<span class="flr fs12 color7A7B82">-->
      <!--<i class="iconfont icongengduox pr"></i>-->
      <!--</span>-->
      <!--</span>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</div>-->

      <!--</div>-->
      <!--单元格-->

      <!--其它模块入口-->
      <div class="other-module bgcFFF pdlr15 mt10">
        <p class="fs15 color45454D">其他服务</p>
        <ul>
          <li @click="toJumpPage('signIn')">
            <i class="iconfont iconmeiriqiandaox1"></i>
            <span class="fs13">
              每日签到
            </span>
          </li>
          <li @click="isShowPop = true">
            <i class="iconfont icondazhuanpanx"></i>
            <span class="fs13">
              幸运大转盘
            </span>
          </li>
          <li @click="isShowPop = true">
            <i class="iconfont iconjifenzhuanqux"></i>
            <span class="fs13">
              积分专区
            </span>
          </li>
          <li @click="toJumpPage('couponList')">
            <i class="iconfont iconkaquanzhongxinx"></i>
            <span class="fs13">
              卡券中心
            </span>
          </li>
          <li @click="toJumpPage('data_edition')">
            <i class="iconfont icongengduoshezhix"></i>
            <span class="fs13">
              更多设置
            </span>
          </li>
          <li v-if="vip_type == 3 && is_audit == 0" @click="toJumpPage('mySalesman')">
            <i class="iconfont icontianjiaxiaoshouyuanx"></i>
            <span class="fs13">
              我的销售员
            </span>
          </li>
          <li @click="handelShera">
            <i class="iconfont icontuiguangpingtaix"></i>
            <span class="fs13">
              {{vip_type | shareText}}
            </span>
          </li>
          <li @click="toJumpPage('salesStatistics')" v-if="vip_type !=1 && is_audit == 0">
            <i class="iconfont iconxiaoshoushujux"></i>
            <span class="fs13">
              销售数据
            </span>
          </li>
          <li @click="toJumpPage('problemFeedback')">
            <i class="iconfont iconwentifankuix1"></i>
            <span class="fs13">
              问题反馈
            </span>
          </li>
          <li @click="toJumpPage('enshrineList')">
            <i class="iconfont iconwodeshoucangx1"></i>
            <span class="fs13">
              我的收藏
            </span>
          </li>
          <li @click="isShowPop = true">
            <i class="iconfont iconguanyuSOFOx1"></i>
            <span class="fs13">
              关于SOFO
            </span>
          </li>

          <!--<li @click="isShowPop = true">-->
          <!--<i class="iconfont iconpindanzhuanqux"></i>-->
          <!--<span class="fs13">-->
          <!--拼单专区-->
          <!--</span>-->
          <!--</li>-->
          <!--<li @click="toJumpPage('filialPiety')">-->
          <!--<i class="iconfont iconxiaoxinchuandix"></i>-->
          <!--<span class="fs13">-->
          <!--孝心传递-->
          <!--</span>-->
          <!--</li>-->
          <!--<li @click="isShowPop = true">-->
          <!--<i class="iconfont iconwoyaotouzix"></i>-->
          <!--<span class="fs13">-->
          <!--我要投资-->
          <!--</span>-->
          <!--</li>-->
          <!--<li @click="isShowPop = true">-->
          <!--<i class="iconfont iconjiaruxiaoshouyuanx"></i>-->
          <!--<span class="fs13">-->
          <!--加入销售-->
          <!--</span>-->
          <!--</li>-->
        </ul>
      </div>
      <!--其它模块入口-->
    </div>
    <!--内容-->

    <div class="pop-comment fs14" v-if="isComment">
      <i class="iconfont iconcha1 fs11 color7A7B82" @click="isComment = false"></i>
      <i class="line pr"></i>
      <img src="../../assets/img/icon_$.png" alt="">
      <span @click="handleToOrderList(4)">全部评价得</span>{{estimate_add_points}}积分
    </div>
    <Tabbar  @tabberSelected="tabberSelected" :activeNum="active"></Tabbar>
    <!--<Loading :show="isLoading"></Loading>-->
    <PromptWin :isShowPop="isShowPop" @close="handleClose"></PromptWin>

    <AddSalesmanCord
      :isTemporary="isTemporary"
      :temporaryImgSrc="temporaryImgSrc"
      @handleClosePop="handleClosePop"
    ></AddSalesmanCord>
  </section>
</template>

<script type="text/ecmascript-6">
  import Tabbar from '../../components/Tabbar.vue'
  import Loading from '../../components/Loading.vue'
  import PromptWin from '../../components/PromptWin.vue'
  import AddSalesmanCord from '../../components/AddSalesmanCord.vue'

  import { tabChange,insertPvUv } from '../../assets/js/utils'
  import api from '../../http/api'

  import grade_img1 from '../../assets/img/grade_img1.png'
  import grade_img2 from '../../assets/img/grade_img2.png'
  import grade_img3 from '../../assets/img/grade_img3.png'
  import grade_img4 from '../../assets/img/grade_img4.png'

  export default {
    components:{
      Tabbar,Loading,PromptWin,AddSalesmanCord
    },
    data(){
      return{
        isShowPop:false,
        active:4,
        isLoading:false,
        user:{
          nickname:'nickname',
          avatar:'',//头像地址
        },
        no_pay:9,//待支付订单
        no_devivery:0,//待发货
        wait_receive:0,//待收货
        estimate:0,//待评价
        refund:0,//售后/退款
        coupon_count:0,//优惠劵数量
        integral:0,//积分
        fans:0,//粉丝数量
        grade_img:grade_img1,//用户级别头像
        balance:0,//余额
        estimate_add_points:0,//评论可得积分
        vip_type:'1',//用户类型
        spent:0,//终生会员进度
        member_total:0,//终生会员总额
        member_percentage:0,//终生会员进度条进度
        member_time:0,//会员剩余到期时间
        rank:'',//会员
        isComment:false,
        isVipBgc:false,//是否显示vip背景
        is_audit:'',//用于申请合伙人和销售员的审核：0，正常；1，申请销售员；2，申请合伙人
        isTemporary:false,
        temporaryImgSrc:'',
      }
    },
    created(){
      this.initData();
      this.$nextTick(function() {
        this.remove()
      })
    },
    filters:{
      hundreds(value){
        return value > 99 ? '99+' : value
      },
      shareText(value){
        let result = '';
        result = (value == 1 || value == 2) ? '邀请好友' : '推广平台'
        return result;
      }
    },
    methods:{
      remove(){
        setInterval(() =>{
          $('.fliker-img').animate({
            left:90
          },600)
        })
      },
      initData(){
//        this.isLoading = true;

        this.$ajax({
          url:api.getUserCenter,
          method:'get'
        }).then(res => {
          this.isLoading = false;
          let data = res.data.content

          this.user.nickname = data.user.nickname
          this.user.avatar = data.user.avatar
          this.no_pay = data.no_pay
          this.no_devivery = data.no_devivery
          this.wait_receive = data.wait_receive
          this.estimate = data.estimate
          this.isComment = this.estimate > 0 ? true : false
          this.refund = data.refund
          this.coupon_count = data.coupon_count
          this.integral = data.integral
          this.fans = data.fans
          this.balance = data.balance
          this.estimate_add_points = data.estimate_add_points
          this.vip_type = data.type
          this.spent = data.spent
          this.member_total = data.member_total
          this.member_time = data.member_time
          this.member_percentage = data.member_percentage
          this.rank = data.rank
          this.isVipBgc = data.bgimg
          this.is_audit = data.is_audit

          if(data.type == 1){
            this.grade_img = data.rank == 0 ? grade_img1 : grade_img2
          }else if(data.is_audit == 0 && (data.type == 2 || data.type ==3)){
            this.grade_img = data.type == 2 ? grade_img3 : grade_img4
          }


        }).catch(err => {
          console.log('err-- ', err);
        })
        insertPvUv(localStorage.getItem('href'),5)
      },
      tabberSelected(val){
        this.$router.push({
          path:tabChange(val),
        })
      },
      //获取自己的信息
      getUserInfo(){
        this.$ajax({
          url:api.userInfo,
          method:'post'
        }).then(res => {
          let data = res.data.content;
          this.userId = data.id;
          this.temporaryImgSrc = 'https://itshop.sofoshare.com/api.php/user/create_qrcode?url=' + encodeURI('https://itshop.sofoshare.com/index') + '&pid=' + data.id;
        })
      },
      handelShera(){
        this.getUserInfo();
        this.isTemporary = !this.isTemporary
      },
      handleClosePop(){
        this.isTemporary = false;
      },
      //关闭活动未开始提示弹窗
      handleClose(){
        this.isShowPop = false
      },
      //跳转
      toJumpPage(name){
        this.$router.push({
          path:'/index/web/' + name,
        })
      },
      //跳转到订单列表页
      handleToOrderList(index){
        localStorage.setItem('orderListActive',index)
        this.$router.push({
          path:'/index/web/orderList'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/center.scss";
</style>
